<template>
    <van-sticky>
        <van-nav-bar
            title="拼团详情"
            left-text="返回"
            left-arrow
            @click-left="onBack"
        /> 
    </van-sticky>

    <div class="circle">
        <van-circle
            v-model:current-rate="rate"
            :rate="rate"
            :speed="100"
            :text="text"
            size="200"
            stroke-width="60"
            layer-color="#ccc"
        />
    </div>

    <div class="time">
        <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
    </div>

    <div class="info">
        <van-card
            :title="info.products.name"
        >
            <template #thumb>
                <router-link :to="{path:'/product/product/info',query:{proid:info.products.id}}">
                    <van-image
                        width="100%"
                        height="100%"
                        fit="cover"
                        :src="info.products.thumb_cdn"
                    />
                </router-link>
            </template>
            <template #desc>
                <div class="total">拼团人数：{{ info.total }}人</div>
            </template>

            <template #price>
                <div class="price">拼团价格：￥{{ info.products.team }}</div>
            </template>

            <template #tags>
                <div class="info-time">
                    拼团时间：{{ info.createtime_text }}（开始）- {{ info.endtime_text }}（结束）
                </div>
            </template>
        </van-card>
    </div>

    <div class="list">
        <div class="item" v-for="item in list" :key="item.id">
            <div class="left">
                <img :src="item.businesss.avatar_cdn" alt="">
            </div>
            <div class="right">
                <div class="nickname" v-if="info.busid == item.busid">{{ item.businesss.nickname }}（发起人）</div>
                <div class="nickname">{{ item.businesss.nickname }}</div>
                <div class="join-time">拼单时间：{{ item.createtime_text }}</div>
            </div>
        </div>
    </div>

    <van-action-bar>
        <van-action-bar-button type="danger" text="参与拼团" @click="onJoin" />
        <van-action-bar-button type="danger" text="发起拼团" @click="onCreate" />
    </van-action-bar>
</template>

<script setup>
const { proxy } = getCurrentInstance();

const currentRate = ref(0);// 已拼团的人数
const total = ref(0);// 拼团总人数
const info = ref({
    products:{}
});// 拼团数据
const list = ref([]);// 拼团人员数据
const teamid = ref(proxy.$route.query.teamid);
const time = ref(0);// 倒计时

const rate = ref(0);// 当前进度

const text = ref('拼团进度：' + rate.value + '%');

onBeforeMount(() => {
    getTeamInfo();
})

const getTeamInfo = async () => {
    let params = {
        teamid:teamid.value
    }

    let result = await proxy.$post({
        url:'/product/team/info',
        params
    })

    if(result.code === 1)
    {
        info.value = result.data.team;
        list.value = result.data.list;

        total.value = info.value.total;
        currentRate.value = list.value.length;

        let num = (currentRate.value / total.value).toFixed(2);

        rate.value = num * 100;

        text.value = '拼团进度：' + rate.value + '%';

        time.value = parseInt((info.value.endtime * 1000) - Date.now())
    }
}

const onJoin = () => {

}

const onCreate = () => {

}

const onBack = () => {
    proxy.$router.back();
}
</script>

<style scoped>
.circle{
    display: flex;
    justify-content: center;
    margin-top: 10vw;
}

.time{
    display: flex;
    justify-content: center;
    margin-top: 5vw;
}

.info{
    margin-top: 5vw;
}

.list{
    margin-top: 5vw;
    padding-bottom: 40px;
}

.list .item{
    background: #f0f0f0;
    display: flex;
    margin: 5vw 0;  
}

.list .item .left{
    width: 80px;
    height: 60px;
}

.list .item .left img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.list .item .right{
    margin-left: 2vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 14px;
}
</style>